{extend name="index/iframe" /}

{block name="content"}
<div style="margin: 20px 40px;">
    <div id="container" style="min-width: 310px; height: 550px;"></div>
    <div class="message"></div>
</div>
{/block}

{block name="css"}
{/block}

{block name="js"}
<!-- jquery -->
<script src="__STATIC__/hcharts/jquery-3.1.1.min.js"></script>
<!-- highcharts主框架 -->
<script src="__STATIC__/hcharts/code/highcharts.js"></script>
<!-- 导出 -->
<script src="__STATIC__/hcharts/code/modules/exporting.js"></script>
<!-- 数据加载功能模块 -->
<script src="__STATIC__/hcharts/code/modules/data.js"></script>
<script src="__STATIC__/hcharts/code/modules/series-label.js"></script>
<script src="__STATIC__/hcharts/code/modules/oldie.js"></script>
<!-- 中文 -->
<script src="__STATIC__/hcharts/highcharts-zh_CN.js"></script>
<!-- 主题 -->
<!--<script src="__STATIC__/hcharts/code/themes/gray.js"></script>-->
<!--<script src="__STATIC__/hcharts/code/themes/sand-signika.js"></script>-->

<script>
    layui.use(['form'], function(){
        var chart = Highcharts.chart('container', {
            series: {$series},
            title: {
                text: '{$Think.get.game_id}：{$Think.get.game_name}'
            },
            subtitle: {
                text: '当日新增：{$Think.get.add}'
            },
            xAxis: {
                categories: {$date_type},
                tickWidth: 0,
                gridLineWidth: 1,
            },
            yAxis: [{
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}',
                },
                showFirstLabel: false
            }, {
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],
            tooltip: {
                shared: true,
                crosshairs: true,
//                pointFormat: '{point.y} %',
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true,          // 开启数据标签
                    },
                    cursor: 'pointer',
                    marker: {
                        lineWidth: 1
                    },
                }
            }
        });
    });

</script>
{/block}